<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        姓名<input type="text" v-model="uname"><br>
        性别<input type="radio" v-model="gender" value="boy">男
           <input type="radio" v-model="gender" value="girl">女<br>
        爱好
        <input type="checkbox" v-model="hobby" value="book">看书 
        <input type="checkbox" v-model="hobby" value="run"> 跑步
        <input type="checkbox" v-model="hobby" value="music"> 听歌 <br> 
        职业：
        <select v-model='job' multiple>
            <option value="0">请选择职业...</option>
            <option value="1">教师</option>
            <option value="2">软件工程师</option>
            <option value="3">律师</option>
        </select>

        <textarea v-model="info" cols="10" rows="10"></textarea>
        <button>注册</button>

    </div>
</body>
<script>

var vm = new Vue({
    el: "#app",
    data: {
       uname: 'temo',
       gender: 'boy',
       hobby: ['book',"music"],
       job: [2,3],
       info: '身高185'
    }
});

</script>
</html>